<template>
  <div v-show="show" class="backTop" @click="btnClick">
    <i class="iconfont icon-huidaodingbu"></i>
  </div>
</template>

<script>
export default {
  name: 'BackTop',
  data () {
    return {
      // 滚动距离
      scrollTop: 0,
      // 是否显示
      show: false
    }
  },
  mounted () {
    window.addEventListener('scroll', () => {
      this.scrollTop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset
      if (this.scrollTop >= 500) {
        this.show = true
        return
      }
      this.show = false
    })
  },
  methods: {
    btnClick () {
      window.scrollTo(0, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.backTop {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 12px;
  z-index: 2;
  i {
    font-size: 30px;
  }
}
</style>
